<template>
  <div>
    <div style="display: flex;justify-content: space-between">
      <div>
        <el-input size="mini" style="width: 300px;margin-right: 8px"
                  placeholder="请输入部门名进行搜索..."
                  prefix-icon="el-icon-search"
                  v-model="empName"
                  @keydown.enter.native="initDeps"
                  @clear="initDeps"
                  clearable></el-input>
        <el-button size="mini" type="primary" icon="el-icon-search" @click="initDeps">搜索</el-button>
      </div>
      <div>
        <!--        导入导出 搜索-->
        <el-upload
            style="display: inline-flex;margin-right: 8px"
            action="/employee/basic/import"
            :show-file-list="false"
            :headers="headers"
            :before-upload="beforeUpload"
            :disabled="importDataDisabled"
            :on-success="onSuccess"
            :on-error="onError">
          <el-button size="mini" :icon="importDataBtnicon" type="success">
            {{ importDataBtnText }}
          </el-button>
        </el-upload>


        <el-button @click="exportData" icon="el-icon-download" size="mini" type="success">
          导出数据
        </el-button>
<!--        <el-button size="mini" type="primary" icon="el-icon-plus" @click="showAddEmpView">添加员工</el-button>-->
      </div>

    </div>
    <div style="margin-top: 10px">
      <el-table
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          size="mini"
          :data="deps"
          stripe
          border
          style="width: 100%">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column
                prop="department2.organizationId"
                label="部门编号"
                fixed
                width="100">
        </el-table-column>
        <el-table-column
            prop="department2.organizationName"
            label="部门名称"
            fixed
            width="80">
        </el-table-column>
        <el-table-column
            prop="department.organizationName"
            width="100"
            label="上级部门">
        </el-table-column>
        <el-table-column
            prop="department2.organizationType"
            width="85"
            align="left"
            label="部门类型">
        </el-table-column>
        <el-table-column
                prop="cities"
                width="85"
                align="left"
                label="所属地区">
        </el-table-column>
        <el-table-column
                prop="employeeBase.name"
                width="85"
                align="left"
                label="部门负责人">
        </el-table-column>
        <el-table-column
            prop="department2.enmNumber"
            width="80"
            align="left"
            label="编制人数">
        </el-table-column>
        <el-table-column
            prop="department2.newNumber"
            width="75"
            label="在职人数">
        </el-table-column>
        <el-table-column
            prop="department2.effectiveTime"
            width="100"
            align="left"
            label="生效时间">
        </el-table-column>
        <el-table-column
            prop="department2.failureTime"
            width="100"
            label="失效时间">
        </el-table-column>
        <el-table-column
            prop="mailAddress"
            width="150"
            align="left"
            label="通讯地址">
        </el-table-column>
        <el-table-column
            prop="telephone"
            width="100"
            align="left"
            label="部门电话">
        </el-table-column>
        <el-table-column
            prop="mail"
            width="150"
            align="left"
            label="部门邮箱">
        </el-table-column>
        <el-table-column
            prop="webUrl"
            width="180"
            align="left"
            label="部门网址">
        </el-table-column>
        <el-table-column
            fixed="right"
            width="200"
            label="操作">
          <template slot-scope="scope">
            <el-button @click="showEditEmpView(scope.row)" style="padding: 3px" size="mini">编辑</el-button>
            <el-button style="padding: 3px" size="mini" type="primary">查看高级资料</el-button>
            <el-button @click="deleteEmp(scope.row)" style="padding: 3px" size="mini" type="danger">删除
            </el-button>
          </template>
        </el-table-column>


      </el-table>

      <div style="display: flex;justify-content: flex-end">
        <el-pagination
            background
            @current-change="currentChange"
            @size-change="sizeChange"
            :page-size="size"
            layout='sizes,prev, pager, next, jumper, ->, total'
            :total="total">
        </el-pagination>
      </div>

    </div>

<!--    <el-dialog-->
<!--        :title="title"-->
<!--        :visible.sync="dialogVisible"-->
<!--        width="80%">-->
<!--      <div>-->
<!--        <el-form :model="emp" :rules="rules" ref="empForm">-->
<!--          <el-row>-->
<!--            <el-col :span="6">-->
<!--              <el-form-item label="姓名:" prop="name">-->
<!--                <el-input size="mini" style="width: 150px" prefix-icon="el-icon-edit" v-model="emp.name"-->
<!--                          placeholder="请输入员工姓名"></el-input>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--            <el-col :span="5">-->
<!--              <el-form-item label="性别:" prop="gender">-->
<!--                <el-radio-group v-model="emp.gender" style="margin-top: 8px">-->
<!--                  <el-radio label="男">男</el-radio>-->
<!--                  <el-radio label="女">女</el-radio>-->
<!--                </el-radio-group>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--            <el-col :span="6">-->
<!--              <el-form-item label="出生日期:" prop="birthday">-->
<!--                <el-date-picker-->
<!--                    v-model="emp.birthday"-->
<!--                    size="mini"-->
<!--                    type="date"-->
<!--                    value-format="yyyy-MM-dd"-->
<!--                    style="width: 150px;"-->
<!--                    placeholder="出生日期">-->
<!--                </el-date-picker>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--            <el-col :span="7">-->
<!--              <el-form-item label="政治面貌:" prop="politicId">-->
<!--                <el-select v-model="emp.politicId" placeholder="政治面貌" size="mini" style="width: 200px;">-->
<!--                  <el-option-->
<!--                      v-for="item in politicsstatus"-->
<!--                      :key="item.id"-->
<!--                      :label="item.name"-->
<!--                      :value="item.id">-->
<!--                  </el-option>-->
<!--                </el-select>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--          </el-row>-->
<!--          <el-row>-->
<!--            <el-col :span="6">-->
<!--              <el-form-item label="民族:" prop="nationId">-->
<!--                <el-select v-model="emp.nationId" placeholder="民族" size="mini" style="width: 150px;">-->
<!--                  <el-option-->
<!--                      v-for="item in nations"-->
<!--                      :key="item.id"-->
<!--                      :label="item.name"-->
<!--                      :value="item.id">-->
<!--                  </el-option>-->
<!--                </el-select>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--            <el-col :span="5">-->
<!--              <el-form-item label="籍贯:" prop="nativePlace">-->
<!--                <el-input size="mini" style="width: 120px" prefix-icon="el-icon-edit"-->
<!--                          v-model="emp.nativePlace" placeholder="请输入籍贯"></el-input>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--            <el-col :span="6">-->
<!--              <el-form-item label="电子邮箱:" prop="email">-->
<!--                <el-input size="mini" style="width: 150px" prefix-icon="el-icon-message"-->
<!--                          v-model="emp.email" placeholder="请输入电子邮箱"></el-input>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--            <el-col :span="7">-->
<!--              <el-form-item label="联系地址:" prop="address">-->
<!--                <el-input size="mini" style="width: 200px" prefix-icon="el-icon-edit"-->
<!--                          v-model="emp.address" placeholder="请输入联系地址"></el-input>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--          </el-row>-->
<!--          <el-row>-->
<!--            <el-col :span="6">-->
<!--              <el-form-item label="职位:" prop="posId">-->
<!--                <el-select v-model="emp.posId" placeholder="职位" size="mini" style="width: 150px;">-->
<!--                  <el-option-->
<!--                      v-for="item in positions"-->
<!--                      :key="item.id"-->
<!--                      :label="item.name"-->
<!--                      :value="item.id">-->
<!--                  </el-option>-->
<!--                </el-select>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--            <el-col :span="5">-->
<!--              <el-form-item label="职称:" prop="jobLevelId">-->
<!--                <el-select v-model="emp.jobLevelId" placeholder="职称" size="mini" style="width: 150px;">-->
<!--                  <el-option-->
<!--                      v-for="item in joblevels"-->
<!--                      :key="item.id"-->
<!--                      :label="item.name"-->
<!--                      :value="item.id">-->
<!--                  </el-option>-->
<!--                </el-select>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--            <el-col :span="6">-->
<!--              <el-form-item label="所属部门:" prop="departmentId">-->
<!--                <el-popover-->
<!--                    placement="right"-->
<!--                    title="请选择部门"-->
<!--                    width="200"-->
<!--                    trigger="manual"-->
<!--                    v-model="popVisible">-->
<!--                  <el-tree default-expand-all :data="allDeps" :props="defaultProps" :expand-on-click-node="false"-->
<!--                           @node-click="handleNodeClick"></el-tree>-->
<!--                  <div slot="reference"-->
<!--                       style="width: 150px;display: inline-flex;font-size: 13px;border: 1px solid #dedede;height: 26px;border-radius: 5px;cursor: pointer;align-items: center;padding-left: 8px;box-sizing: border-box"-->
<!--                       @click="showDepView">{{inputDepName}}-->
<!--                  </div>-->
<!--                </el-popover>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--            <el-col :span="7">-->
<!--              <el-form-item label="电话号码:" prop="phone">-->
<!--                <el-input size="mini" style="width: 200px" prefix-icon="el-icon-phone"-->
<!--                          v-model="emp.phone" placeholder="电话号码"></el-input>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--          </el-row>-->
<!--          <el-row>-->
<!--            <el-col :span="6">-->
<!--              <el-form-item label="工号:" prop="workID">-->
<!--                <el-input size="mini" style="width: 150px" prefix-icon="el-icon-edit"-->
<!--                          v-model="emp.workID" placeholder="工号" disabled></el-input>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--            <el-col :span="5">-->
<!--              <el-form-item label="学历:" prop="tiptopDegree">-->
<!--                <el-select v-model="emp.tiptopDegree" placeholder="学历" size="mini"-->
<!--                           style="width: 150px;">-->
<!--                  <el-option-->
<!--                      v-for="item in tiptopDegrees"-->
<!--                      :key="item"-->
<!--                      :label="item"-->
<!--                      :value="item">-->
<!--                  </el-option>-->
<!--                </el-select>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--            <el-col :span="6">-->
<!--              <el-form-item label="毕业院校:" prop="school">-->
<!--                <el-input size="mini" style="width: 150px" prefix-icon="el-icon-edit"-->
<!--                          v-model="emp.school" placeholder="毕业院校名称"></el-input>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--            <el-col :span="7">-->
<!--              <el-form-item label="专业名称:" prop="specialty">-->
<!--                <el-input size="mini" style="width: 200px" prefix-icon="el-icon-edit"-->
<!--                          v-model="emp.specialty" placeholder="请输入专业名称"></el-input>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--          </el-row>-->
<!--          <el-row>-->
<!--            <el-col :span="6">-->
<!--              <el-form-item label="入职日期:" prop="beginDate">-->
<!--                <el-date-picker-->
<!--                    v-model="emp.beginDate"-->
<!--                    size="mini"-->
<!--                    type="date"-->
<!--                    value-format="yyyy-MM-dd"-->
<!--                    style="width: 130px;"-->
<!--                    placeholder="入职日期">-->
<!--                </el-date-picker>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--            <el-col :span="6">-->
<!--              <el-form-item label="转正日期:" prop="conversionTime">-->
<!--                <el-date-picker-->
<!--                    v-model="emp.conversionTime"-->
<!--                    size="mini"-->
<!--                    type="date"-->
<!--                    value-format="yyyy-MM-dd"-->
<!--                    style="width: 130px;"-->
<!--                    placeholder="转正日期">-->
<!--                </el-date-picker>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--            <el-col :span="6">-->
<!--              <el-form-item label="合同起始日期:" prop="beginContract">-->
<!--                <el-date-picker-->
<!--                    v-model="emp.beginContract"-->
<!--                    size="mini"-->
<!--                    type="date"-->
<!--                    value-format="yyyy-MM-dd"-->
<!--                    style="width: 130px;"-->
<!--                    placeholder="合同起始日期">-->
<!--                </el-date-picker>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--            <el-col :span="6">-->
<!--              <el-form-item label="合同终止日期:" prop="endContract">-->
<!--                <el-date-picker-->
<!--                    v-model="emp.endContract"-->
<!--                    size="mini"-->
<!--                    type="date"-->
<!--                    value-format="yyyy-MM-dd"-->
<!--                    style="width: 150px;"-->
<!--                    placeholder="合同终止日期">-->
<!--                </el-date-picker>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--          </el-row>-->
<!--          <el-row>-->
<!--            <el-col :span="5">-->
<!--              <el-form-item label="身份证号码:" prop="idCard">-->
<!--                <el-input size="mini" style="width: 180px" prefix-icon="el-icon-edit"-->
<!--                          v-model="emp.idCard" placeholder="请输入身份证号码"></el-input>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--            <el-col :span="6">-->
<!--              <el-form-item label="聘用形式:" prop="engageForm">-->
<!--                <el-radio-group v-model="emp.engageForm" style="margin-top: 8px">-->
<!--                  <el-radio label="劳动合同">劳动合同</el-radio>-->
<!--                  <el-radio label="劳务合同">劳务合同</el-radio>-->
<!--                </el-radio-group>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--            <el-col :span="7">-->
<!--              <el-form-item label="婚姻状况:" prop="wedlock">-->
<!--                <el-radio-group v-model="emp.wedlock" style="margin-top: 8px">-->
<!--                  <el-radio label="已婚">已婚</el-radio>-->
<!--                  <el-radio label="未婚">未婚</el-radio>-->
<!--                  <el-radio label="离异">离异</el-radio>-->
<!--                </el-radio-group>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--            <el-col :span="6">-->
<!--              <el-form-item label="在职状态:" prop="workState">-->
<!--                <el-radio-group v-model="emp.workState" style="margin-top: 8px">-->
<!--                  <el-radio label="在职">在职</el-radio>-->
<!--                  <el-radio label="离职">离职</el-radio>-->
<!--                </el-radio-group>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--          </el-row>-->
<!--        </el-form>-->
<!--      </div>-->
<!--      <span slot="footer" class="dialog-footer">-->
<!--    <el-button @click="dialogVisible=false">取 消</el-button>-->
<!--    <el-button type="primary" @click="doAddEmp">确 定</el-button>-->
<!--  </span>-->
<!--    </el-dialog>-->

  </div>
</template>

<script>
export default {
  name: "DepAdvInfo",
  data() {
    return {
      title:'',
      popVisible2:false,
      showAdvanceSearchView:false,
      searchValue: {
        politicId: null,
        nationId: null,
        jobLevelId: null,
        posId: null,
        engageForm: null,
        departmentId: null,
        beginDateScope: null
      },
      popVisible: false,
      dialogVisible: false,
      headers: {
        Authorization: window.sessionStorage.getItem("tokenStr")
      },
      importDataDisabled: false,
      importDataBtnText: '导入数据',
      importDataBtnicon: 'el-icon-upload2',
      deps: [],
      loading: false,
      total: 0,
      currentPage: 1,
      size: 10,
      empName: '',
      defaultProps: {
        children: 'children',
        label: 'name'
      },
    };
  },
  mounted() {
    this.initDeps();
    this.initData();
  },
  methods: {
    deleteEmp(data) {
      this.$confirm('此操作将永久删除【' + data.name + '】, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteRequest("/employee/basic/" + data.id).then(resp => {
          if (resp) {
            this.initDeps();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    showEditEmpView(data) {
      this.initPositions();
      this.title = '编辑员工信息';
      this.emp = data;
      this.inputDepName = data.department.name;
      this.dialogVisible = true;
    },
    initPositions() {
      this.getRequest('/employee/basic/positions').then(resp => {
        if (resp) {
          this.positions = resp;
        }
      })
    },
    initData() {
      if (!window.sessionStorage.getItem("nations")) {
        this.getRequest('/employee/basic/nations').then(resp => {
          if (resp) {
            this.nations = resp;
            window.sessionStorage.setItem("nations", JSON.stringify(resp));
          }
        })
      } else {
        this.nations = JSON.parse(window.sessionStorage.getItem("nations"));
      }
    },
    onSuccess() {
      this.importDataBtnicon = 'el-icon-upload2';
      this.importDataBtnText = '导入数据';
      this.importDataDisabled = false;
      this.initDeps();
    },
    onError() {
      this.importDataBtnicon = 'el-icon-upload2';
      this.importDataBtnText = '导入数据';
      this.importDataDisabled = false;
    },
    beforeUpload() {
      this.importDataBtnicon = 'el-icon-loading';
      this.importDataBtnText = '正在导入';
      this.importDataDisabled = true;

    },
    exportData() {
      this.downloadRequest('/employee/basic/export');
    },
    sizeChange(size) {
      this.size = size;
      this.initDeps();
    },
    currentChange(currentPage) {
      this.currentPage = currentPage;
      this.initDeps();
    },
    initDeps() {
      this.loading = true;
      let url = '/org/dep/findAdvDep/?currentPage=' + this.currentPage + '&size=' + this.size;
      if(this.empName){
        url += "&organizationName=" + this.empName;
      }
      this.getRequest(url).then(resp => {
        this.loading = false;
        if (resp) {
          this.deps = resp.data;
          console.log(  this.deps.id);
          this.total = resp.total;
        }
      });
    }
  }
}
</script>

<style scoped>

</style>